<template>
  <view class="page-default">
    <c-nav-bar title="信息查询" type="white" bg-color="rgba(255,255,255,0.6)" />

    <view class="mx-2 rounded-lb-4 rounded-rb-4 pb-4">
      <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />身体信息
      </view>
      <view class="m-3 mt-6 rounded-2 bg-white px-4 line-height-6">
        <up-form ref="form1" label-position="left" label-width="auto" :model="dataForm" :rules="rules">
          <up-form-item ref="item1" required label="健康状况" :border-bottom="true" prop="name">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                健康状况
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker v-model="dataForm.birthday" class="no-border" has-input :show="show" mode="datetime" />
          </up-form-item>
          <up-form-item ref="item1" required label="是否残疾"prop="name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                是否残疾
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
          <up-form-item ref="item1" required label="残疾类型" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                残疾类型
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
          <up-form-item ref="item1" required label="身高(cm)" prop="name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                身高(cm)
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input placeholder="请输入内容" border="none" />
          </up-form-item>
          <up-form-item ref="item1" required label="体重(kg)" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                体重(kg)
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input placeholder="请输入内容" border="none" />
          </up-form-item>
          <up-form-item ref="item1" required label="血型">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                血型
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker v-model="dataForm.birthday" class="no-border" has-input :show="show" mode="datetime" />
          </up-form-item>
        </up-form>
      </view>
      <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />其他信息
      </view>
      <view class="m-3 mt-6 rounded-2 bg-white px-4 line-height-6">
        <up-form ref="form1" label-position="left" label-width="auto" :model="dataForm" :rules="rules">
          <up-form-item ref="item1" required label="乘火车区间" :border-bottom="true" prop="name">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                乘火车区间
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker v-model="dataForm.birthday" class="no-border" has-input :show="show" mode="datetime" />
          </up-form-item>
          <up-form-item ref="item1" required label="就读方式"prop="name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                就读方式
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
          <up-form-item ref="item1" required label="是否担任过班干部" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                是否担任过班干部
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
          <up-form-item ref="item1" required label="是否愿意担任班干部" prop="name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                是否愿意担任班干部
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input border="none" placeholder="请输入内容" />
          </up-form-item>
          <up-form-item ref="item1" required label="是否独生子女" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                是否独生子女
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
          <up-form-item ref="item1" required label="是否流动人口" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                是否流动人口
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
          <up-form-item ref="item1" required label="是否建档立卡贫困户" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                是否建档立卡贫困户
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-datetime-picker
              v-model="dataForm.birthday"
              has-input
              :show="show"
              mode="datetime"
              class="no-border"
            />
          </up-form-item>
          <up-form-item ref="item1" required label="家庭年收入" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                家庭年收入
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input placeholder="请输入内容" border="none" />
          </up-form-item>
          <up-form-item ref="item1" required label="家庭情况说明" label-position="top" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                家庭情况说明
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-textarea placeholder="请输入内容" border="none" class="textarea-no-px" />
          </up-form-item>

          <up-form-item ref="item1" label="建档立卡贫困户证明" prop="userInfo.name" label-position="top" :border-bottom="false">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                建档立卡贫困户证明
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-upload
              class="my-2"
              :file-list="fileList1"
              name="1"
              multiple
              :max-count="10"
            >
              <view class="upload-file w-full p-4">
                <view class="text-center">
                  <view class="flex items-center justify-center">
                    <up-icon name="camera-fill" size="40" color="#C5C9D1" />
                  </view>
                  <view class="w-full text-#C5C9D1">
                    上传证明
                  </view>
                </view>
              </view>
            </up-upload>
          </up-form-item>
        </up-form>
      </view>

      <view class="mx-8 mb-2">
        <u-button size="default" shape="circle" class="gradient-button mb-8 mt-8" @click="goNextPage">
          <text class="text-base text-white">
            提交
          </text>
        </u-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// 响应式表单数据
const dataForm = ref({
  name: '',
  birthday: '',
});

// 校验规则
const rules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change'],
    },
  ],
};

const show = ref(false);
const columns = reactive([
  ['中国', '美国', '日本'],
]);
</script>

<style lang="scss" scoped>
:deep(.u-line){
 border-bottom: 2px dashed #e0e7ec !important;
}

:deep(.uni-input-input){
  text-align: right;
}
:deep(.uni-input-placeholder ){
  text-align: right;
}
:deep(.uni-textarea-textarea){
  color: #000000;
}
:deep(.u-form-item__body__left__content__label){
  color: #6E7B8B;
}
</style>
